{% extends 'base/base.html' %}
{% load i18n l10n admin_urls static %}
{% load app_extras static %}
{% block extra-css %}
<link href="{% static 'idcops/css/select2.min.css' %}" type="text/css" media="all" rel="stylesheet">
{% endblock extra-css %}

{% block content-header %}
<h1>{{meta.verbose_name}}
  <small>
    <b class="text-red"> {{queryset.count}} </b>个机柜
  </small>
</h1>
{% endblock %}
{% block main-content %}

{% block form %}
<form method="post" class="form">
  {% csrf_token %}
  <div class="box box-warning">
    <div class="box-header with-border">
      <h3 class="box-title">请您确认{{action_name}}清单</h3>
      <div class="box-tools pull-right">
        <input type="hidden" name="action" value="{{action}}" />
        <input type="hidden" name="post" value="yes" />
        <input type="submit" class="btn btn-danger btn-sm margin-r-5" value="确定{{action_name}}" />
        <a href="{%url 'idcops:list' meta.model_name%}" class="btn btn-default btn-sm">
          <span>返回列表</span>
        </a>
      </div>
    </div>
    <div class="box-body table-responsive margin-bottom">
      <table id="item-list" class="table table-bordered table-condensed">
        <thead>
          <tr class="active">
            <th width="3%"> #</th>
            <th>机柜名称</th>
            <th>机柜别名</th>
            <th>所在区域</th>
            <th>所属客户</th>
            <th>合同电力(A)</th>
            <th>机柜状态</th>
            <th>机柜类型</th>
            <th width="15%">到期时间<b class="text-red"> *</b></th>
          </tr>
        </thead>
        <tbody>
          {% for obj in queryset %}
          <input type="hidden" name="index" value="{{ obj.pk|unlocalize }}" />
          <input type="hidden" name="items" value="{{obj.pk}}" />
          <tr class="{% cycle '' 'active' %}">
            <td style="vertical-align:middle;">{{forloop.counter}}.</td>
            <td style="vertical-align:middle;">
              <a data-toggle="modal" data-target="#modal-lg" href="{{obj.get_absolute_url}}">{{obj}}</a>
            </td>
            <td style="vertical-align:middle;">{{obj.cname}}</td>
            <td style="vertical-align:middle;">{{obj.zone}}</td>
            <td style="vertical-align:middle;">{{obj.client}}</td>
            <td style="vertical-align:middle;">{{obj.cpower}}</td>
            <td style="vertical-align:middle;">{{obj.status}}</td>
            <td style="vertical-align:middle;">{{obj.style}}</td>
            <td style="vertical-align:middle;">
              <input id="expiry_date-{{obj.pk}}" class="form-control" type="date" name="expiry_date-{{obj.pk}}"
                value="{{obj.expiry_date}}" />
            </td>

          </tr>
          {%endfor%}
        </tbody>
      </table>
    </div>

    <div class="box-footer">
      <div class="box-tools pull-right">
        <b>合计：</b><span id="total">{{queryset.count}}</span> 个
      </div>
    </div>
  </div>
</form>
{% endblock form %}
{% endblock main-content %}

{% block extra-js%}
<script type="text/javascript" src="{%static 'idcops/js/select2.min.js' %}"></script>
<script type="text/javascript" src="{%static 'idcops/js/i18n/zh-CN.js' %}"></script>
<script>
  $(document).ready(function () {

    // reset modal cache
    $('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

    // Select2
    var Select = $("select");
    if (Select.length != 0) {
      $("select").select2({ language: "zh-CN" });
    }

  });

</script>
{% endblock extra-js%}